import React from 'react';
import PubSub from 'pubsub-js'
import {StyleSheet} from "react-native";
import {useTheme, Appbar, TouchableRipple, Switch} from 'react-native-paper';
import {PreferencesContext} from '../../context/app_context';

import MyDrawer from '../MyDrawer'

// const MyRefDrawer = React.forwardRef(MyDrawer)
const Header = ({title}) => {
    let token=null
    const theme = useTheme();
    const {toggleTheme, isThemeDark} = React.useContext(PreferencesContext);
    // const drawerRef = React.useRef()
    // console.log(title)
    // console.log(theme)
    // console.log(toggleTheme, isThemeDark)
    React.useEffect(()=>{
        return ()=>{PubSub.unsubscribe(token)}
    },[])
    return (
        <>
            <Appbar.Header theme={{colors: {primary: theme?.colors.surface}}}>
                <Appbar.BackAction onPress={() => {
                }}/>
                <Appbar.Content title={title} subtitle={'Subtitle'}/>
                <TouchableRipple onPress={() => toggleTheme()} rippleColor="rgba(0, 0, 0, .32)">
                    <Switch value={isThemeDark} color={'brown'} onValueChange={() => toggleTheme()}/>
                </TouchableRipple>
                {
                    title == 'HomeScreen' ? <Appbar.Action icon="dots-horizontal" onPress={() => {
                        console.log('2')
                        token=PubSub.publish('openMyDrawer', null)
                    }}/> : <Appbar.Action icon="dots-vertical" onPress={() => {
                        // console.log(drawerRef)
                        // drawerRef.current.openDrawer()
                    }}/>
                }
                {/*<MyRefDrawer drawerRef={drawerRef}/>*/}
            </Appbar.Header>
        </>
    );
};
const styles = StyleSheet.create({
    bottom: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
    },
});
export default Header